E 


% 


٤ FlyAri.com 


درس ضخم] : تعلم الجافآاسكريبت من باآبها الوأسع[ 


السلام عليكم ورحمة الله تعالى وبركاته. 
اليوم نلتقي من أحل الرقي بمنتدى البرمجة و التطوير و كذلك في موضوع مهم بشكل كبير لمن يهتمون بالبرمجة... 
اليوم سنتحدن بشكل شبه كآمل عن الجآفاً سكريبت و بأمثلة و طرق تفسيرية وآضحة و مبسكة حدا حدا.. 
كما اننی اعدكم اننىی سأضع ملحقات للدرس .. ساهتم فيها بالمزيد من الامتلة و الشروحآت التوضيحية لل. tمآاC٤۷a5Sهز‏ 


و سأضع بعض التوضيحآت لتكون الامور وآضحة: 


الدرس و کل ما یحتوي انا صاحبه) لا يوحد نقل. ر 

الموضوع يحتآح درآية في ال ٣١٣"١‏ قبل البدء. 

اي شیئ لم تغفهموه انا هنا , ضعوه لي في الردود. 

الصور بها اسمي بالغفرنسية و هو* / *dھMou fir‏ Laghا*‏ معآذ لغفیري* . يعني ان الدرس خآص بي و غير منقول. 
الكودات غير موحودة في الموضوع فقط هناك صور » لتتدرب بيديك على كل شين .. فهذا سهل. 

هناك امنلة وآقعية و مجربة و قد اقول لاول مرة يوضع درس عربي يشرح الجافاسكريبت و بأمتلة هكذا. 

الدروس لن تقف عند هذا الحد .. بل سأضع لكم ملحقات اخرى للدرس. 


و سأسدي لكم نصيحة : أعطوا وقتا للكودات ليتم استيعاب الدروس. 


انتظروني فى الرد القآدم بحول الله. 


قاصاے 


® EET 
Proscar 


0 ۴ 
د باع 


: تو‎ 6_ @ 
'OJFAaM EU 


ane 


درس ضخم] : تعلم الجافاسكريبت من بآبها الوأاسع[ 


السلام عليكم ورحمة الله تعالى وبركاته. 
ساخبرکم اولا عن الخطوات التی ساقدم علیها خلال شرخی هذا .. فساحاول وضع مفآهیم & طرق و شرح الجاقاسگریبت 


بشكل مختصر عن طريق شرح ال [.. ۸0W‏ ۸/W1٥i0اArra/۴unc‏ ]مما سيوضح بعض المعآلم اثنآء وضع الأمتلة.. 


لنبدأ على بركة الله. 


اولا نقوم بانشآء فلودر جدید 


ملق انش تي اتر اله 


أولا ساضركم بالبرنامة الذي ساعمل به و هو يسمل الامور وهو برنامخ ۸5 N6663‏ الخاض بالیی ائش بی الآن تفتخ ملف الجاقا تمگربیت: 
محتوك تانة التتبيه 


گهد جاقاسکرییت 


alert ("GooD"}; 


امر لاظهار تاقنة للتتبيه 


aghfiri mouad 


قى ملف الاش تى ام أل كى الولف الذاض كرات العا ففط رفي التترات الى طا 


html dir="rtl";خ‎ 
#ECFiİptE type="text/javaacript" src="java. ]3"3t/ SCLFIptY استدعاء ملف الجاقاستريبت‎ 


j HEM? 


الآن لنرى النتيجة المحصل عليها) , ملحوظة : أستخدم متصفح(€ C1۲0"‏ عاوGoo‏ 


C./AppServfwuww/JavaScript/index.html 


0 


Alerte JavaScript 


الصورةة مصغرةhttp://users6.jabry.com/dimaliga/js/5.5¬gö‏ : 


اا ك ااا واف ااه 


confirm ("Ma | 


اظهار تاقنة لقتأكيد الامر 


_agqhfiri mouad 


ساغیر برتامج تحریر خهدات الى برتامج 
NetBeans‏ 


لنرى نتيجة هذا الكود البسيط: 


1 JavaScript 


اهلا و سھلا بكم عند معاذ لخضيرى : أثود مثابعة الدرس ؟ 


Annuıler 


ارف على شن خذدد ال و هو الات 


var mouad = "ıal ;"بكم‎ 


alert [mouad]) ; 


مواقا هو قيمة المتغير معاد 


اظهار تاقنة لاتتبيه 


.aqhfiri mouad 


الآأن نرى النتيجة: 


Alerte JavaScript 


اشلا ہکم 
Hi Empêcher cette page de qênêrer des boîtes de dıaloque supplêmentaıres‏ 


Laghfiri mouad 


الآن نعمل شيئ آخر: 


_aghfiri mouad 


المتصفقج بدون اكه تاقنة بعتى 
بشکل عادی 


اهلا بکم 


الأن لتكفرف لى طررةة لأخخال المعلومات 


اسقله الكريبم الاسم اختيآر الرحاء بك املا"( pronpt‏ 


شنه دالة لاظهار تاقتة تكون 
ہداخلها تاتییت تھا تقول 
باللاشتى ار اله 


و النتيجة 


JavaScript 


: اخلا بك الرحاء اخثبار الآسم الكريم اسظه 


SFE | 


Laghfiri mouad | ÃAnnuıler 


لنحآول عرض ما سيتم ادخاله في خانة الكتابة: 


صتخير سيكوت قيمته ها سيدخله الشخص عبر المروهيت 


٢ 


("الاسم هتا" ,"الكربم اصسفكڭ ادخال متك iلlzj*"( var mouad = prompt‏ 


سے ——ےے سے 


alert ("ll qھ‎ اڵآlھس بك‎ " + mouad 


قتا ترحیب بالز اثر مع اظهار اسمه 
Laghfiri mouad‏ 


JavaScript 


الرحاء منك اذخال اسعك الكريم 


معاذ لفیری 


Laghfiri mouad 


بعد .التقر على آلرر ا6 


Alerte JavaScript 


اغلا و سلا بك سعاذ لغغيري 


*الصيغة العامة. 


قتا عملتا شرط قى حالت التاقتج قى المتقير سيساوف 
TAC mouad = %5 +¥ 1]‏ 
if (mouad = 6] { #‏ 


4( هو التآتج , صحيع") a1٤‏ 


ٍ 
e ]l3ae 1 


1 [ "6 . س اlلتz3l"( alert‏ 
قي حالة الخطا ماذا سيطبع لتا مو عص اتج 


L_aghfiri mouad 


الآن نرى النتيجة: 


Alerte JavaScript 


لتر الجدلومات فى الكو 


TAT MmMouad = Š5 + j 
if (mouad =— 7 1 


u 
r 


("6 هو التآتج , صحبح") a1٤‏ 


E Jlse f 


(77] مو ليس التآتج") alert‏ 


لنرى الآن: 


Alerte JavaScript 


نجرب فقرة اخرى: 


Laghfiri mouad 


اذا كان المتغير لا يساوي ۷ 


var mouad = 

iT [mouad 1: 
alert ( 

٣ 

eE1lse{ 


alert [ خطاً"‎ r 


Alerte JavaScrıpt 


۷ صحیح العنغیر لا يساوي‎ 
HO Empêcher cette page de qênêrer des boîtes de dıaloque supplêmentaıres 


Laghfiri mouad 


الآن نجرب مرحلة اخرى: 


٠‏ 8 يساوي ك ا 


;"7 تسا وي i‏ 


'ے“ے“ے“ے“ے“ کے“ ے“ے“ےےے“ےے ےک 


Alerte Java script 


الآن نجرب لعيبة اخرى; 


var mouad = ] ; تعتی اصعر من او يساو‎ 
1F (mouad * E. ra 


يساوي او من من اصقر 1 العدد صحبح") ٤إعاa‏ 
٣‏ 


else ێ‎ 


mw 1 2‏ 
بساوي او من اصقر ليس 1 العدد خطا")٤إعa1‏ 


Alerte JavaScript 
"۸ اصعر فن صن او بساوگ‎ ١ صحیح العدد‎ . 


Laghfiri mouad 


var mouad = 
if (mouad «<— 3)} { 


يساوي او من من اصغر 1 العدد nصجحzıج"( alert‏ 


1 


E Ise 1 


بساوي او من اصغر ليس 1 العدد غخطİأا") alert‏ 


الناتج: 


َ Alerte JavaScript 


Laghfiri mouad 


الآن نخرح من جو اقرأً اقرأً و نبدا بالتطبيقات التي تعجبكم: 
*//إسنعمل مثلا صفحة لما تدخل لها تطلب الباسوورد » و بالطبع يتم التحقق. 
هذا هو الکود الكامل للخاصية و هو مشروح شرخا تاما: 


// هنا وضعت متفير قيفته هي الباسرورنذ للسنجة var password = "mouad";‏ 
// هنا وضعت كما اسميها انا انبيت للجافاسكريبت :("هنا الياس ادخل","مغلفة المنحة لان الباسرورد ادخال الرحاًء") var input Pa53 = ٥۲00p‏ 
// هنا وضعت اذا كانت قيمة الانبيت متسأوية للع قيمة المتفير الذى به الباسوورد يطبع لنا ما بالاسنJ‏ { if (input pass = password)‏ 


فا فة تی وق اتی اق اها حف التكيو عاق الغا افةو +" ات وة 5 document .write |" pi‏ 
e‏ لنرل ل ا لالا لقلي . ا لاان 1 e e r‏ 


// قى حالة القشل يطبق الامر الذى فى الأاسنل )136ع! 
|// الار الذي سبطبقه :("خآطن اليآيروري")16۲ة 


1 aghfiri mouad 


(http://users6.jabry.com/dimaliga/js/31.pn@) 


النتيجة: 


JavaScript 


LS 


Annuler 


تم تسجيل دخولك بياس ةلاه" 


Javascript 


Alerte Java script 


الباسوورد خاطج 


Empêcher cette page de qênêrer des boîtes de dialogue supplêmentaires 


Laghfiri mouad 


افتا فن الطن الت اس تمر فة ةا ةط 
كو الى ج الدرفمى و الاساسات 


لواف على السوتش و قى حالف تخحنه أل آآتبي اة كن تروط و أوامر فى حال التكقفنى ,و الفكس صد 


صتغیر قیمته قي اقلا 4 var mouad = "Jal";‏ 
اخترتا المتغير المراد تعقيه خلال السهوتش أ س Èۉيھd‏ { switch [mouad)}‏ 
قى حالة تان المتغير يساو اقلا 1 ;: case "al"‏ 
يطبع لتا ي alert ("Hi™}‏ 


هتا لاتهاء الشرط و السهدة breck:;|‏ 


Laghfiri mouad 


الأن نرى النتيجة: 


Alerte Javabcript 


FAT mouad : 
Laah firi Mm 
switch ([mouad) { Laghfiri mouad 
TZaaچe‎ "INal™ 


alert {"Hi™} ; 
breck; 


فى حالة كانت كل الشروط غير صائبة بطبع لتا الشرط الاقتراضى 
ك 


("الاقتراقية القيمة عرض تم للك و صآئية تكن لم للمتغير اخترتها التي القيم كل") ۲٤٣عa1‏ 
brack?;‏ 


Alerte JavaScript 


كل القبم الذي اخائرنها العنغير لم نكن صانبة و لذلك نم عرض القبعة 
اة تئر اضيك 


Laghfiri mouad 


الآن لنرى حلقة ال: Whe‏ 


متتعبر قبهتدة ]1 7] = 1 Var‏ 


while (| i46 


Lil ar 

| 4 التي تحدد قيها عدد التكرار‎ 
document.write i1 + "bry" J}; 
1+; 
٣ 


ن 1 - I=‏ 
تنسشكل متظم . 


هتا التكرار نمسي تصاعديى 


انتهينا من كل الاساسيات التي يجب تعلمها و الاقين بها و هذا ضروري .. و سننتقل الى ما هو اهم و الذي يجب اتقانه جيدا. 


سننتقل الى المصفوفات و هذا عالم آخر انه Matrix :J|‏ 
اولا نرى طريقة انشاء مصفوفة: 
اتشاتا مصفوفة جديدة لها ٣‏ قيم 
TAFT arr = new Array |‏ 
قتا اقشاقا خير جدید 


aghfiri mouad 


و هذه الطريقة الاولى لنملاً المصفوفة بعناصرها: 


"rmouad™ ; 
"laqhHTirci"? 


دة الطرةة اا نة لأوخال الفاضر.آلى المضخوةة و هى السوة 


var arr = new Array ("mouad"™, "laghfiri", "ilzne"}) ; 


لها رند عرض عضر ها من المصفوفة هل الفتصر لتك نراه تحن ,هه الأول (هنى (0دنا0 ةا ةة 


الامر التآلي ([۲۲)3۲۲]0٠اج‏ لان العنصر الاول يملك القيمة 0 و الثاني 1 و هكذا... 


و نری: 


Alerte Java script 


و لما ننفذ الامر: 


alert (arr [lj : 


و النتيجة كالتالي: 


Alerte JavaScript 


laghfırı 


و لما نطبق الامر: 


نرى رسالة الخطأً لأن العنصر غير موجود: 


Alerte JavaScript 


Laghfiri mouad 


«فناك آمر اکى ذف الفاص 


delete arr [2] ; 


و لما ننفذ امر حساب عدد العناصر سنلاحظ انه تم نقص عنصر واحد و الذي له قيمة 2: 


alert (arr. length) ; 


delete arr [2] ; 


لى 3 كاضرو الا هى الود لى قى حالى لم ارا هة الام الوا 


Alerte Javabcript 


الآأن نرى هذه الصورة التي تشرح نفسها: 


= new Array ("mouad", "laghfiri", "خÎHعم۸");: المصقوقة الأول‎ 
= new Array ( "mohamed", "ayoub", "ııe العصقوقة الثأاتنة 7["الالأم‎ 


التالتة و التى هى عيارة عن دمج اللمفصقوقةتين . arrl.concat (aFF2)7‏ 


ی ا 


.1٤03٤ط(7 ر۶ طساعة عدد اجزرآ۶ء المصقوقة الثالتثة‎ Laghfiri mouad 
و سنری انه تم دمج المصفوفتان:‎ 


Alerte Java Script 


Laghfiri mouad 


لنخرت اين اتن وأخد ا ف الخاضص بالمتوفة و الاكرى ل كال رو لفل تى كم الم وان 


Yar arrl = new Array ( "mouad™, "laghfirci™, ENE Fl عتاصر سال ر‎ ١ هتا لديتا مصقوقة مخوتة من‎ 
¥ar rever = arrl.reversze[] 4 شنة ذالة لعتس اماتن العتاصر بالمصقهفة‎ 
alert [(rever.join("/"})) 2; 


هتا دالة للقصل بين عتاصر المصفيوقة 


Laghfiri mouad 


و الناتج بطبيعة الحال: 


Alerte JavaScript 


dle laghfirimouadl 


Laghfiri mouad 


ملحوظة : لقد قصرت في حقكم بخصوص المضوةا .> و اا جد اى 9 ل6 ةا ما اعلمه عنما .. لذلك ابحتو عن المزيد بخصوص المصفوفات. 


خلقتا کائن جدید و شو التصوص 


TAF SLC = 


اتشاتا مير 


aghfiri mouad 


و لنرة طريقة البحث بدآخل النصوص » (كل شيئ مشرووح( 


متغير قيمته ماڌ اعفيركه بب ;ر ["لققيريى new String ("iza‏ 


ے “کے “ےے“ےے “کے 


اتشاتا برومبت سس ; ("" ,"عه اليحت العراد الجرف ادعل") ۲وصدإم = 


ہے “ے“ے 


شنه دالة للحت عن جرف ما و بعهد لتا بمكاته قى المقوفةة str. indexUÛf [pro] ; hui‏ 


اذا كاتت نائج البجتث تساويى - ١‏ و هى الاقراضية قي حالة لم تكن شتاك ناح له ] [1- سد 
; ("تتائج بوجد ا" alert‏ 
قي حالة كان نقناك تتاقج ل +e1sel‏ 


ر( ndةf‏ + " المكاآن قي موجود عته البحتث اردت و ادخلته الذي الجحرف") ٤١إع1ة‏ 


aghfiri mouad 


النتيجة: 


Jlavabcript 
انخال الحرف الصراد البحت عنكه‎ 
| 


Alerte Javabcript 
الحرف الذى ادخلته و اردت البحث حه موحود في الهكان ت‎ 


Empêcher cette page de qênêrer des boîtes de dialogue supplêmentalres 


Laghfiri mouad ok 


Java script 
انخل الحرف العراذ البحث عنه‎ 


Empêcher cette page de qênêrer des boîtes de dıaloque supplêmentaıres 


Alerte Java script 
لا يوجد نتائج‎ 


Empêcher cette page de qênêrer des boîtes de dıaloque supplêmentaıres 


الآن نتحول الى جو التطبيق .. سنرى طريقة للتحقق من الايميل بطريقة بسيطة) O‏ 


> prompt ) ","اتكتروتي بريد ادل"‎ "( a 


قتا للبحتث عن الاروباس بداخل ها ادخله الشخصس ; )"@"( mail. indexOf‏ 


ھا س رطيعه 
قي حالة القشل 
شتا بطمع رسالة الصج 


Laghfiri mouad 


JavaScript 


Alerte Java Script 


Laghfiri moauad 


JavaScript 


| program.eur® hotmail.fr] 


Annuler 


Alerte Java script 


ید و شو program.eur@hotmail.fral la‏ اة يسل 
Ermnpêcher cette dle qênêrer des boltes de dialogue sUpplêrmentaıres‏ 
Fl E pêche page de qênê des bolt de dialog pplê 1‏ 


Laghfiri mouad 


و NRE‏ وك اجرف الم اعا و تهت دم رقي فض من المفالات و الاق جى ل ةة المقال 


قتا وضعتا متقير عبارة عن تص ,"لغقبيرى معlخi"‏ = var text‏ 
شنا وضعتا دالة تحلب لتا من الرقم * الى الرقم ١‏ و قى عبارة عن احرف var slice = text.slice (Û, 3) mm‏ 
طباعتها ; alert {a4LI1Ce}‏ 

Laghfiri mouad 


Alerte Javabcrıpt 


ننتقل الآن الى ما يسما بالدوآل)Functi0۸(‏ 


الآن نرى الصيغة العاأمة: 


امستم الدالة تصعقي اتها دالة 


البارامترات 1 


Tunction name [Parcametre)} { 


Laghfiri mouad 


لنعمل الآن دآلة خصة بنا: 


ِ السار اصتر الو ود 
E _aghfiri mouad‏ 


function msg alert (text) { 


aAlerFT (LEET} ?; 


يظهر تاقنة تتبيه بها قيمة البارامتر الذك تضخعارة تحن 


نعود الآن الى ملف ا۳ا.×عم1nd‏ و نضع: 


html dir="rt]™"y 

<SCEIpT type="text/ javascript" src="31ava.]8"»<t/ SCFIPptEY 

«button onclick='msg alert عمل الدالة<'("طباعتد العراآد التص"(‎ رهظا>/طutton<‎ 
4# hEmMl 


)فما زر ند الفط علية و هذا هو ال00 حمل دالة ها بالکاقاسگرییت( 


Laghfiri mouad 


<uttonط/>اظهر‏ عمل الدآلة<'("طباعتةد العراآد التص"( «button onclick='msg alorFt‏ 


استدعاء الدالة 
فى حالة الضخط عليه 


لنجرب الآن في الصفحة: 


الآن بعد الضغفط: 
Alerte JavaScript‏ 


النص الهرآد طباعنه 


Laghfiri mouad 


الآن انتهينا من التعلم .. بقي التطبيق و الامثلة لتسريح المعلومات في العل .. لنتآبع أالامتلة القوية و البسيطة. 
نمسح ما سبق و نعمل: 
I o a O‏ 


نضع الكود التالى : 


<ط/>اعلا و سهلا بكم مع معاد لغقيري .. عآته تجآرب بسيطة لتعلم الحجاقاسكريبيدت <p id="text test”">.‏ 


#7 AITY 


ا خطوا الايدى الا مر كله سو عليه دقك .. فاوامر الخاقا كرت قى بات تم أمتدعاء التةر خسب الأندى كدها لق ما ديد عة( 
ندخل و نری: 


اهاد و سهلا يكم م معاد لخقيري .. هاته تجارب بسيطة اتلم الجآقاسكرييت ‏ 


)کل شيئ عادي( 


عداهاقة هت الكوذ اللسغال الخاص بالودف 


«diy 1d="diyv test" style="di1splay: none ;‏ 
<ط/> اعلا و سهلا يكم مع معاة لغقيري .. هآاته تجآارب يسيطة لتعلم الجاقاسگكرييدت «<D id="text teSt">.‏ 


2 f AIT 


نری فی المتصفح کل شیی اختفی: 


tml 7 


GY file///C/AppServ/www/JavaScript/index.html 


جید لکن لو اردنا اخفاءها بالجافاسکریبت اهو شیئ صعب ؟؟ لا فكل شيئ سهل يحتاج عقل فقط.. 


نل لملف العافاس كرتت و تعمل 5ال 


اسم الدالة 


function show (ID OB) 
var ld dûd = document .gqetElementEByld{ID UB) ; لبه الكائن عبر الابدكه‎ 
id d.style.dl1isplay = "none" ; 


وضع خآصية الظهور بستأيل العنصر قحت تأثير تون و تعتى صخق 
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لی وان اال و ا ای ا اد اد 


html dir="rt]"z 
<SCEIPpT tyYpe="text/ javascript" src="1ava. ]3"2</ SCFIptEY 
Aly 1d="diyv test"? 


<ط/>اعلا و سهلا يكم مع معآدة لغقيرى .. هآته تجآرب يسيطة لتعلم الجاقاآسكرييت «<p id="text te5t">.‏ 


div> )‏ 
هنا وضعتا زر و عد الكليك يتف الدالة مع وضع الايدي للستصر مكان البارامتر 020024 275-[' ; Burton anclick='show ("div _ test")‏ 
html‏ ¢ 


في حدث ال اا٤‏ /0عملنا اسم الدالة و غيرنا البارامتر بالايدي الخاص بالعنصر الذي نود تغيير ۷هام0i5‏ الخاص به الى. 0٣۴‏ 


لنعد و نجرب: 


اهاد و سهاا يكم مى معاذ لحقيري .. هاته تجآرب بسيطة اتلم الجافاسگرييت ‏ 
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بعد الضغط يختفي كل شيئ: 


لنعمل دالة اخرى لتظهر لنا ما اخفيناآه: 


Tunction hide (ID OB) { 
var ld dûd = document .gqetElementEyId{({ID OB) ; 
1d d.style.display = "none" ; 


1 
ل 


Tunctlion show (ID OB) { 
var ld dû = document .getElementEyld{lID UB) ; 
1d d.style.dl1splay = "plock" 


و نضف اسفل الزر السابق ما يلي لعطي: 


#4 DUTETEOATI onclick='"' Bide (di7 te3 J 7 '>-</buttony> 


DuUttaAaT onclick=' shaw ("diy test"}] ;'2¥/buttony>y 


الآن نجرب" 


ا 


)کل شیئ سيعمل فقط جربوهار 


الات ا ردا أن كن الافر خد مرفرالخاهن فقط كو 


anmousemove=—=' hide ("div te3t"] ;' 
onmousemovek' show ("div test") ; ' 


هذا الحدت سيمل لها تمرر الماجس 
قوق الزر ققط . 
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نضع فيه الكلاسات التالية: 


.menu head: 
backqround: #477334; . لها الخلفية‎ 
colar: #Ffff;: . الوت االكقابة‎ 
font-family: tahoma ;: نوع الخط‎ 


Taont—31ze: llpE?r dd ححم الخط‎ 
Lext-aligNn : FCijghlLz; . تجاح التقابة‎ 


wWIAth: SUS; 


.menu conti 


background: #2433D4; 
calor: ffrff; 
LTont-family: Tahoma 
ToOnNtE—a1ze: IIpE? 
direction: inherit ; 
HIAtEH: 60%; 


.bu Close 
background: #FFODOOD; 
calor: ffff; 
LTont-Lfamily: Ttahoma 
TCONTL—3SaI1Ize: IIpE; 
direction: inherit ; 
HIdAtEH: 3%; 


. bu Agi 
background: #1C3438:; 
calor: #Ffff:; 
Tont-family: tahoma ; 
Tont—-sa1ze: lIlIpE; 
direction: inherit ¢; 
Width: 3%; 


.bu Rel 


background: F#D44FO0D:; 
color: #fFE: 
Lont-Lfamily: tahoma 
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Tont—sailize: IlIIpE; 
direction: inherit ; 
HIGAtEH: 3%; 


كلف الفسم و خقحةد انهاه التافر كى الفف 


f StYIEY 
#CENTEELY 


الآن نضيف التالي فقي ملف الاش تي ام ال 


Laghfiri mouad‏ الكلاس و سينفذ ما وضعناة قي المعلومات السابقة للعنصر لاف الستابل 


ايدي الان / الديف 
عند الضغط سينفذ ما فى الدالة تلهز 


$liY id="menu head" clasa="nenu head"+ 


button clasa="bu Clase" onclick="Cla3e () ; "X4 / button e 
«button class="bu Ag" onclick="Ag () ;">#/ button gq ازرار عند الفغط على كل واحد منهم يقوم بعملية ماقي‎ 
button clasa="bu Re" onclick="Re () ;":-4/button> 4 


الوالا التي جهزناشا على الجافاسكريبت 


تلمح فقا - ûل ١‏ عنوان العلبة 
div>‏ 4 
<div id="menu cont" class="menu cont"?‏ 
<0۲>اهلا و سهلا بكم في دروس الجافاسكريبت التي اتهنى من له عز و جل ان تنأل رضأكم و ان تستفيدوا منها .. 
4D align="left";‏ 
تحيات امخوكم في له معاذ لغقيري . 
tpt div>‏ 


الأن تفت الف كعات الى وففاها آنا القعط على كل تهر على جدة. 
Laghfiri mouad‏ 


Function Close [ ) { 
var menul = document .gqetE lementBy Id ("menu head"; ; جلى الكائن اللديق الحالوية الخاصة بالر ا‎ 
yar menu = document .qetE lementBy Id ("menu cont”) ; جلاب الا ۽ الخص بهكان الكتابة و شو للديف الثاتية‎ 


function AG () { 
var menul = document .gqetElementById | "menu _ head") ? جحلب الكاقتان عبر الايدى‎ 
var menu? = document. getE lementById ("menu cont”) ; 


العرض الجديد الذي سيصبح للديف الاولس الخاصة توان 1 menul.style.width = "1350p"‏ 
العلبة و الثاتية ايضا و يكوت متساوي ليكوت بعض القنسيق ™; menu2.atyle.width = "1350p"‏ 


تغير طول الديف الثاتية و يخون جحسب ‏ مقاس الشساشة ; menu2.style.heigqht = "éZB8pxX"™‏ 
TU 2 vle. display = "block" 1‏ 


1 
ل 


CTunction Rel) { 
var menul = document . geEtE lementById ("menu head”) ; 4 خلب الكائتانا عبر الايدك‎ 
var menu = document .qetE lementBy Id ("menu cont") ; 
menu2.sTtyle.display = "none" ; هتا لاخفاء الآيدى القاتية ققط‎ 
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النتيجة النهائية: 


pe BH ES‏ العامة هه 


اقلا و سهلا بكم قي دروس الجاقاسكرييت التي اتهتى من الله عز و جل ان تتاله رضاكم و انا تستفينوا صتها .. 


تحبات اخوتم فى الله معاد اغفقرك . 


نضغط على زر التصغير: 


الآن نجرب الضغط على زر التكبير: 


| Û flef/fC/AppServlwww!.. x E 


Ct fle///C/AppSewunm/lavasuipîndexhiml___ 


الا و سهلا بكم فى دروس الجافاسكريت التي اتمنى من الله عز و جل انا تنال رضأكم و انا تستفيدوا منها .. 


تتيات اخوكم في الله معاذ لغفيرق . 


الآن تفط على الأغلاق فتختفى النافذة ككل 


| Û nelCApriennd.. * E 
٤ JÎ 0 | f IE/ICAppSenuurwrwYavaScripi/indexhtm ۲ 


Dr hr 


lagi mouad agi moual 
agiri mouad 
agiri mouad 
i lap noua 
1 agri mouad 
agiri mouad 1a noua laqirî mouad 
agiri mouad 
lagi mouad 
agiri mouad 
Laghfiri mouad 
ia Laghfiri mouad 
agri mouad 
Lagi mouad 
1 agiri mouad 
lagi mouad 


نغير الآن الكلاسات في الستايل الى: 


. qood { 
background : qreen?; 
color: frrfr; 
LTont-family: tahoma ; 


Tont-sa1ze: lIpK; 


YWIAth: 3pE?; 


.bad{ 
background: red; 
color: frfr; 
Lfont—-family: tahoma ; 
Tont-s31ze: lIpE:; 
WHWIGAth: 3DEKE?; 
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تعمل ديف جديدة بالخوآص التالية: 
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تمل الان الف ن الاك عملاة دى قروو الماؤفن على الف 


اسم الدالة و شى بدون بارامغرات 


aghfiri mouad 
جحلب الايق عن طريق الايد‎ 


Tunction change class|l | 
var element = document .qeTtElemenTEById{ "divv™} ; 


element. className = "good ™; 


eE]1lse 1 
element. CLIaszaHame = "pad™ 


انا لم يكن الستايل باد تجول الى باد 


الآن نجرب* الحريرة اللي درنا: ,0 


الان ترف طرتة اى لافتال آلا سات ل صر كلت موو المادتي 5ط 


function change class () { 
var element = document .geTE lemenTtEById { "divv™} ; 
yar new class = prompt ("Jaa Î جأا۶! اسقله الجدبد الكلاس اسم‎ 
| . قیمته تساو ما تم ادخاله بالیرومیت‎ 


element. cClIazsWHame = pew CIaS3S :; 


۲ 
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النتيجة: 


JavaScript 


أذخل اسم الكلاس الحذيد اسغله رحاءاً 


JavaScrıpt 


أذدخل اسم الكلاس الحذيد اسغله رحاءاً 
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Laghfiri mouad 


EN lI E CS 


JavaScript 


أذخل اسم الكلاس الحذيد اسفله رحاءاً 


Annuıler 


فسيطبع لنا الكتابة بدون ستآيل يعني بدون خلفية و لا خوآص خط... 


فضلت السويتش لتفهموها جيد: 


function change class () { 
ar element = document .gqetElemenTEyYId {("divvy™} ; 
rar new_class = prompt ("JZzخıÎ ,"راء اسقله الجدبد الگلاصس اسم‎ ""(; 


switch (new class] {qؤۆۉl—‎ _ اخترنا المتغير الذي ستقارن قيمته‎ 
case"bad":i qAgû  _. فى حالة يته تساوچ‎ 
element .claszzaName = "pad"; dq بعود لتا بضع الخلاس باد‎ 
break? 
case "good ™: 
eڳlement.clIaszaNHame‎ = "good"; 


Laghfiri mouad 
break? 


default : qڙ——‎ 


شتا قى حالة لم يكن القيمة بها اک من باد ae‏ 50 
او كوود يعطى رسالة الخطا و لا يغير شيغا -#:("موجود غير العختآر الكلاس") a16۴٤‏ 


ےےے کے ے کے ے کے ےک ے کے 


break; 


JavaScript 


أذخل اسم الكلاس الحذيد اسفله رحاءاً 
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aram Annuıler 


تدخل احرقا غير موحهدة قى التلاسات او تقترته قارقا 


٠ نرگ‎ 


Alerte Javabcript 


Empêcher cette page de qênêrer des boîtes de dıalogque supplêmentalıres 


Jlavabcript 


أذخل اسم الكلاس الحديد اسغله رحاءاً 


Annuıler 


خرن الان تسا آخر .و هة ناء حول اء على ود خاقاقی نت قط 


نترك ملف الاشعى آم ال فارغ و نص هات المكرات في ملف الحاة: 


ر ("","زجاةةء!ا المثوبة بالتسية للجدول العرض ادخل") ٣صpصتءم ‏ 
7(" ,"الجاشية جچجp prompt ("Jz‏ = 

7(" ,"راء کلاس ÎدJz"( prompt‏ = 

:("","للجدول الخلفية لون أدخل") ٣٥0هام‏ = 


prompt ("JzdÎ ","الكتاآية لون‎ "(+ 


کے“ ے > ے ے ے ے > ے—ے ‏ ے سے ے ےت 


= prompt ("JzsÎ pzz AlS", ""}; 


کے ے سے ے سے ے کے ے سے سو کے = ے ےک 


شنا تصع القيم التى تم وصعها بالبروميت 


document .writeln ('¢table width="'+wid+'" clasa="'+c]a+'" style="backgrcound: ' +bac' 
scolar: '+colt's;font-size:'taizt+'™" border="' {horlt!' "HELL KTtÎ?TT</ TATE? /Lable 


تغیرها بای كابة كاتت 


Laghfiri mouad‏ ضعوا الكود قي سطر واحد .. قاتا وضسته قي سطرين لكي اصهرة لكم فقط 


La page ã l' adresse http://localhost’ ıIndıque : 


أدخل العرض الجدول بالنسبة العثوية ؤجاءءا 
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La page ã l'adresse http://localhost’ ıIndıque : 
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O Empêcher cette page de qênêrer des boîtes de dıaloque supplêmentalres 


Laghfiri mouad 


La page ã l' adresse http://localhost’ ıIndıque : 


أذخل الكلاس رحاءاً 


لم اضعه لانني لم ضع اک كلاس في صفحة الاش تي ام الآ 
Empêcher cette page de qênêrer des boîtes de dıaloque supplêmentaıres‏ 
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1a page ã l' adresse http://localhost ındıque : 


Empêcher cette paqe de qênêrer des boîtes de dıalogque supplêmentalres 


La page ã l'adresse http://localhost/ ındıque : 


أذخل لون الكثابة 


Empêcher cette page de qênêrer des boîtes de dıaloque supplêmentaıres 


La page ã l' adresse http://localhost’ ındıque : 


أذخل ححم الكنابة 
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Empêcher cette page de qênêrer des boîtes de dıaloque supplêmentaıres 


الآن النتيجة النهائية هي عبارة عن ما يلي (مبني على معلوماتنا:( 


اتمنى من كل قلبي ان تنال هذه السلسلة من الدروس و الامثلة اعجآبكم.. 
كما انني تعبت فيها . لذلك اتمنی أن ترضيكم فقط. 


تحياتي لكم معاذ لغفيري. 


شاصاے 


٣ 5 
ر ® َة م ت‎ 
Prof am SUF 


السلان عليكم .. 
تم تجهيز الكتاب لكي لا تضيع الصور .. و لك تكون هناك استفادة كبيرة للاخوآن العرب .. 
کا سیتم تجهیز درووس اخرگ باذن الثہ 

تحيات اخوكم معاد لغفيري / من مرآكش بالمغرب . 
لا استفسار 
Program.eur@hotmail.fr‏ 

Pi xo@live.fr 

او علح الهاتف 

. 212672720662+ 


اتمنح ان تدعوا لي و لوالدى . 


